<template>
  <div class="home">
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <span>
          <el-button round name="type">{{
            this.$store.state.InfoUser.username
          }}</el-button></span
        >
        <span>
          <el-button round type="warning" @click="tc()">退出登录</el-button></span
        >
      </el-header>
    </el-container>

    <el-container style="height: 890px; border: 1px solid #eee  position: absolute;" class="imgg">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu router :default-active="this.$router.path" unique-opened class="imgg">
                  <el-submenu
            v-for="(item, keyname,index) in menuObj"
            :key="index"
            :index="index+''">
            <template slot="title">
              <span slot="title">{{ keyname}}</span>
            </template>
            <el-menu-item-group class="imgg">
              <el-menu-item
                v-for="it in item"
                :key="it.id"
                :index="it.linkurl"
              >
              {{it.name}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu> 
        </el-menu>
      </el-aside>

      <el-container direction="vertical">
        <div>
          <el-main>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item
                v-for="item in this.$store.state.breadcrunmbName"
                :key="item.id"
                >{{ item }}</el-breadcrumb-item
              >
            </el-breadcrumb>
            <hr />
          </el-main>
        </div>

        <el-main class="imgg">
          <router-view> </router-view>
        </el-main>
      </el-container>
    </el-container>


   
  </div>
</template>




<script>
import Vue from "vue";
import axios from "axios";
var deptMap = new Map();

export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };

    return {
      tableData: Array(20).fill(item),
      menuData: [],
      ss: { id: "" },
      fucai: [],
      zicai1: [],
      zicai5: [],
      zicai11: [],
      zicai13: [],
      zicai15: [],
      arr: [
        { name: "1", index: "a" },
        { name: "2", index: "b" },
      ],
      menuObj: {},
    };
  },
  created() {
   
    axios.get("/api/TmenuAllList?name="+JSON.parse(sessionStorage.getItem("user")).username).then((aa) => {


      this.menuObj = aa.data;
    
    });
    this.$store.commit("getUsers");
     
  },
  methods: {
    tc() {
      sessionStorage.removeItem("user");
      this.$router.push("/login");
    },
    infoSum(index){
      console.log("=="+index)
      return  index;
    }
  },
};
</script>

<style scoped>
.el-header {
 background-color: aquamarine;
  color: #333;
  line-height: 60px;
  background: url(https://seopic.699pic.com/photo/40158/4308.jpg_wh1200.jpg);
}

.el-aside {
  color: #333;

 
}
.el-col {
  border-radius: 4px;
}
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.imgg{
  
  background: url(https://seopic.699pic.com/photo/40158/4308.jpg_wh1200.jpg);
}
</style>